vue 父页面向子页面传递数据

父页面

index.vue

<template>
  <div class="hello">
    <Children :name="name"></Children>
  </div>
</template>
<script>
import Children from '你的路径/Children';
export default {
  components:{
    Children:Children
  },
  data () {
    return {
      name:'父页面的数据'
    }
  },
</script>

子组件

Children.vue

<template>
  <div>
    <h2>{{name}}</h2>
  </div>
</template>
<script>
export default {
  data(){
    return{
      activeName:1
    }
  },
  props:{
      name:{
          type:String，
          default:'我是默认值，可以不定义'
      }
  }
}
</script>

props 里定义的内容就是父页面传递过来的数据
type 类型可以是String,Number,Array,Object,Boolean
default 默认如果是 Array 或者 Function 必须以 return 的方式定义
例：

options:{
    type:Array,
    default(){
        return [0,1,2,3]
    }
}

更多详细知识介绍请访问我的个人主页